<template>
  <div>
    <h1>App组件</h1>
    <p>count----》{{ count }}</p>
    <button @click="increment">累加</button>
    <button @click="incrementN({ n: 5 })">累加N</button>

    <button @click="decrement">累减</button>

    <button @click="incrementWait">过一段时间累加</button>
    <button @click="incrementWaitN(5)">过一段时间累加N</button>
  </div>
</template>

<script>
// import stores from "./stores";
// console.log(stores.state.count);

// 使用vuex提供的mapState函数可以生成计算属性
// 使用vuex提供的mapMutations函数可以生成方法
// 使用vuex提供的mapActions函数可以生成异步的方法

import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "App",
  mounted() {
    // console.log(this, "app");
    // 返回的是一个对象
    // const reslut = mapState(["count", "num"]);
    // console.log(reslut);
    // const reslut = mapMutations(["increment", "decrement", "incrementN"]);
    // console.log(reslut);
  },
  // computed: {
  //   // 可以使用计算属性来使用vuex里面的数据
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   num() {
  //     return this.$store.state.num;
  //   },
  // },
  computed: {
    // 直接展开对象使用即可  里面的参数是一个数组就是vuex里面的你所需要的数据
    ...mapState(["count", "num"]),
  },
  methods: {
    // 直接展开 参数是一个数组
    ...mapMutations(["increment", "decrement", "incrementN"]),

    // 异步的
    // incrementWait() {
    //   this.$store.dispatch("incrementWait");
    // },
    // incrementWaitN(n) {
    //   this.$store.dispatch("incrementWaitN", n);
    // },

    // 也可以直接展开 传入一个数组
    ...mapActions(["incrementWait", "incrementWaitN"]),
  },
};
</script>

<style></style>
